<template>
	<view class="container">
		<view class="oders_box" v-for="(v,i) in odersList" :key="i">
			<view class="contents">
				<text :class="['iconfont',v.icon]"></text>
				<text class="tex">{{v.text}}</text>
			</view>
			<uni-icons type="right" size="15"></uni-icons>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	// 我的订单
	const odersList = reactive([{
		icon: 'icon-dingdan2',
		text: '景区订单'
	}, {
		icon: 'icon-jiudian',
		text: '酒店订单'
	}, {
		icon: 'icon-xianluxianludingdan',
		text: '线路订单'
	}, {
		icon: 'icon-yanchu',
		text: '演出订单'
	}, {
		icon: 'icon-shangpin1',
		text: '商品订单'
	}, {
		icon: 'icon-shebao1',
		text: '社保订单'
	}])
</script>

<style lang="less">
	.container {
		.oders_box {
			background: #fff;
			border-bottom: 1rpx solid lightgray;
			display: flex;
			align-items: center;
			width: 100%;
			height: 160rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			.iconfont {
				font-size: 60rpx;
				font-weight: 600;
			}

			.tex {
				font-size: 34rpx;
				margin-left: 16rpx;
			}

			.contents {
				flex: 1;
			}
		}
	}
</style>